<template>
	<div>
		<headercontent v-bind:headerTitle = "headerTitle"></headercontent>
		<div class="winPrize">
			<ul class="nav nav-tabs">
                <li class="active"><a href="#">分析师登记</a></li>
                <li><a href="#">企业登记</a></li>
			</ul>
			<div class="tab-content">
                <div class="tab-pane active inputDiv">
                	<form class="smart-green">
					    <label for="name">姓名</label>
					    <input class="text" id="name" type="text" name="name" placeholder="请填写您的姓名">
					  	<label for="sort">分类</label>
					  	<select class="text" name="sort" id="sort">
						    <option value="dazong">大宗商品</option>
						    <option value="jinshu">贵金属</option>
						    <option value="waihui">外汇</option>
						    <option value="gupiao">股票</option>
						    <option value="qita">其他</option>
					    </select>
					    <label for="sex">性别</label>
					  	<select class="text" name="sex" id="sex">
						    <option value="男">男</option>
						    <option value="女">女</option>
					    </select>
					    <label for="tel">手机</label>
					    <input class="text" id="tel" type="text" name="tel" placeholder="请填写您的手机号码">
					    <label for="email">邮箱</label>
					    <input class="text" id="email" type="email" name="email" placeholder="请填写邮箱号">
					    <label for="wechat">微信号</label>
					    <input class="text" id="wechat" type="text" name="wechat" placeholder="请填写微信号">
					    <label for="company">所在公司</label>
					    <input class="text" id="company" type="text" name="company" placeholder="请填写公司所在公司名称">
					  	<label for="summary_own">个人简介</label>
					    <textarea class="text" id="summary_own" name="summary_own" placeholder="200字以内"></textarea>
					  	<label for="uploadImg">上传头像<span style="color: red;">(图片小于500k，长宽比例1:1)</span></label>
					  	<div class="text textDiv">
					  		{{uploadText}}
					  		<input type="file" id="uploadImg" accept="image/*" capture="camera"> 
					  	</div>
					  	<img class="upload" :src="imgUrl" alt="" v-if="imgUrl"/>
					    <button type="submit" class="btn">提交</button>
					</form>
                </div>
                <div class="tab-pane inputDiv">
                	<form class="smart-green">
					    <label for="companyName">企业名称 </label>
					    <input class="text" id="companyName" type="text" name="name" placeholder="请填写您的企业名称">
					  	<label for="companySort">分类</label>
					  	<select class="text" id="companySort" name="sort">
						    <option value="jgib">机构IB</option>
						    <option value="chuanmei">传媒</option>
					   </select>
					    <label for="companyTel">手机</label>
					    <input class="text" id="companyTel" type="text" name="tel" placeholder="请填写您的手机号码">
					    <label for="companyEmail">邮箱</label>
					    <input class="text" id="companyEmail" type="email" name="email" placeholder="请填写邮箱号">
					    <label for="companyWechat">微信号</label>
					    <input class="text" id="companyWechat" type="text" name="wechat" placeholder="请填写微信号">
					  	<label for="companySummary">公司简介</label>
					    <textarea class="text" id="companySummary" name="summary_own" placeholder="200字以内"></textarea>
					  	<label for="companyUploadImg">上传头像<span style="color: red;">(图片小于500k，长宽比例1:1)</span></label>
					  	<div class="text textDiv">
					  		{{uploadText}}
					  		<input type="file" id="companyUploadImg" accept="image/*" capture="camera"> 
					  	</div>
					    
					    <button type="submit" class="btn">提交</button>
					</form>
                </div>
           </div>
		</div>
		<footercontent></footercontent>
	</div>
</template>
<script>
	import headercontent from './header'
	import footercontent from './footer'
	export default {
  		name: 'WinPrize',
  		components:{headercontent,footercontent},
  		data() {
			return {
				headerTitle: "报名登记",
				uploadText:"点击选择图片",
				imgUrl:""
			}
		},
  		mounted() {
			this.init();
		},
		methods: {
			init(){
				var _this = this;
				$(".nav-tabs li a").on("click",function(){
					var current = $(this).parent().index();
					$(".nav-tabs li").removeClass("active").eq(current).addClass("active");
					$(".tab-content .tab-pane").removeClass("active").eq(current).addClass("active");
					return false;
				});	
				
				$(".textDiv input").on("change",function(){
					var item = $(this);
					var obj = item[0].files[0];
					var objTempUrl = "";
					if(obj){
						if(obj.size / 1024 > 500){
							$(".dialogContent .usualMessage").empty().append('<span style="color:red;">图片大于500k,请重新选择图片</span>');
				  			_this.openDialog();
				  			_this.uploadText = "点击选择图片";
				  			_this.imgUrl = "";
				  			item.val("").parent().addClass("error");
							return false;
						}else{
							if (window.createObjectURL!=undefined) { // normal
				              objTempUrl = window.createObjectURL(obj) ;
				              } else if (window.URL!=undefined) { // firefox
				                objTempUrl = window.URL.createObjectURL(obj) ;
				              } else if (window.webkitURL!=undefined) { // google
				                objTempUrl = window.webkitURL.createObjectURL(obj) ;
				            }
				            _this.imgUrl = objTempUrl;
				            console.log(_this.imgUrl);
							_this.uploadText = obj.name;
						}
					}else{
						_this.uploadText = "点击选择图片";
				  	    _this.imgUrl = "";
					}
					
				});
				
				$(".divDialog .dialogClose").on("click",function(){
		  			$(".text").removeClass("error");
		  		});
			},
			openDialog(){
				$(".usualMessage").show();
				$(".dialogTitle").empty().append("系统消息");
				$(".dialogMask").fadeIn();
				$(".divDialog").fadeIn();
			},
			closeDialog(){
				$(".dialogMask").fadeOut();
				$(".divDialog").fadeOut();
			}
		}
		
	}
</script>
<style>
.winPrize {padding: 15px; border-top: 1px solid #ddd; background: #ffff;font-size:1.2em;color:#666;}
.nav-tabs{margin-bottom: 15px;}
.nav-tabs{border-bottom: 1px solid #ddd;}
.nav-tabs > li{float: left; margin-bottom: -1px;}
.nav-tabs > li > a{margin-right: 2px; line-height: 1.42857; border: 1px solid transparent; border-radius: 2px 2px 0 0; outline: none; display: block; padding: 10px 15px;color:#666;}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{color: #F30401; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default;}
.nav:before, .nav:after{content: " "; display: table;}
.nav:after{clear: both;}
.nav:before, .nav:after{content: " "; display: table;}
.tab-content > .tab-pane{display: none;}
.tab-content > .active{display: block;}
.smart-green .text {margin: 5px 0 10px;text-indent: 10px;}
.winPrize select.text {width:calc(100% + 2px);text-indent: 4px;}
.inputDiv textarea.text {height:50px;}
.inputDiv .textDiv {position: relative; line-height: 31px; cursor: pointer;}
.textDiv input{position: absolute; width: 100%; left: 0; height: 100%; opacity: 0;}
img.upload {width:50%;}
.winPrize .btn {margin-top:20px;}
</style>